<template>
	<view class="p-bot30">
		<view class="Nav">
			<u-tabs :list="list1" lineColor="#FF784A" :current="current" lineWidth="40" lineHeight="2"
				:scrollable="false" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="click"></u-tabs>
		</view>

			
		<view class="viewbox auto p-top120">

			<view class="list" v-for="(item,index) in pageData" :key="index" @click="toUrl(`detail?id=${item.id}`)">
				<view class="OrderTime bot">商品单号：{{item.ordcode}}</view>
				<view class="rows d-flex m-top20">
					<view class="product_Img p-re">
						<image :src="$imgUrls(item.pdtimg)" mode="aspectFill" class="wh bor_radius_10"></image>
						<view class="h7 white numId p-top4 p-bot4 p-left14 p-right14" @click.stop="IdsShow(item)">
							{{item.Ids[0]}}
						</view>
					</view>
					<view class="d-flex f-column j-sb m-left20   flex-1">
						<text class="color_33 size28 ellipsis_2">{{item.pdtname}}</text>
						<view class="d-flex a-center" v-if="item.pdt_spec">
							<text class="color_99 h6 f-shrink-0">规格：</text>
							<text class="color_33 h6 bold ellipsis">{{item.pdt_spec}}</text>
						</view>
						<view class="d-flex a-center">
							<text class="color_99 h6">数量：</text>
							<text class="color_33 h6 bold">X{{item.pdt_num}}</text>
						</view>
					</view>
				</view>

				<view class="row f-column m-top20">
					<view class="row a-center color_33 size28">{{item.usedAddress}}</view>
					<view class="row a-center m-top10">
						<text class="color_80 h6">{{item.usedName}}</text>
						<text class="p-left20 color_80 h6" @click.stop="$Tel(item.usedPhone)">{{item.usedPhone}}</text>
					</view>
				</view>

				<view class="Ordernum" :class="{'m-top14':item.status != 3}">
					<text class="color_80 h6">{{item.order_date}}</text>
					<view class="d-flex a-center">
						<view class="confirm " v-if="item.status == 3" @click.stop="distribution(item)">自配</view>
						<view class="confirm " v-if="item.status == 3" @click.stop="Materialflow(item)">物流</view>
					</view>
				</view>
			</view>

		</view>




		<empty type='1' v-if='!pageData.length' :msg='"没有相关的订单哦"'></empty>
		<u-popup :show="show" @close="show = false" mode="center" round="10" closeable>
			<view class="popContent">
				<text class="black size30 bold text-center">{{showData.pdtname}}</text>
				<view class="m-top30 d-flex a-center color_33 size28">
					<text class="pop_name  color_33 size28">数量：</text>
					<text class="color_33 size28">{{showData.pdt_num}}</text>
				</view>
				<view class="row m-top10">
					<text class="color_33 size28 pop_name">id：</text>
					<view class="flex-1 d-flex f-wrap">
						<view class="w-333 hidden color_33 size28 m-bot10" v-for="(item,index) in showData.Ids"
							:key="index">{{item}}</view>
					</view>
				</view>

			</view>
		</u-popup>



		<Material  v-if="expressage"  @Hide="expressage = $event" 
		         @Logistics="orderDistribution(2,$event)"></Material>
  
	</view>
</template>

<script>
	import WX from 'jweixin-module';
	export default {
		data() {
			return {
				imgUrl: this.imgUrl,
				list1: [{
					name: '待发货',
					status: 1,
				}, {
					name: '已发货',
					status: 2,
				}, {
					name: '已签收',
					status: 3,
				}],
				activeStyle: {
					color: '#FF784A',
					fontSize: '30rpx',
					fontWeight: 'bold'
				},
				inactiveStyle: {
					color: '#333333',
					fontSize: '26rpx'
				},
				current: 0,
				page: 1,
				limit: 10,
				status: 1,
				getMore: true,
				pageData: [],
				showData: '',
				show: false,
			
				expressage: false,
			
				itemResult:'',
			}
		},
		onLoad(opt) {
			if (opt.state) {
				this.status = opt.state;
				const Index = this.list1.findIndex(n => n.status == opt.state);
				this.current = Index;
			}

			this.getWarehouseOrderList();
		
			
		},
		
		methods: {
		   
			
			getWarehouseOrderList() {
				this.$http.get({
					url: '/singleSaleManageApi/getWarehouseOrderList',
					data: {
						shop_id: uni.getStorageSync('store_id'),
						page: this.page,
						limit: this.limit,
						status: this.status
					}
				}).then(res => {
					if (res.code != 100) return;
					const result = res.data || [];
					result.forEach(item => {
						if (item.id) item.Ids = item.id.split(',');
					})
					this.page == 1 ? this.pageData = result : this.pageData = this.pageData.concat(result);
					if (result.length < this.limit) this.getMore = false;
				})
			},
			distribution(item) {
				let that = this;
				that.itemResult = item;
				
				that.$model('提示', '确定配送商品吗?').then(res1 => {
					if (!res1) return;
					that.orderDistribution(1);
				})
			},
			Materialflow(item) {
				let that = this;
			    that.itemResult = item;
				that.expressage = true;
			},
			
			orderDistribution(way,Item){
				let that = this;
				that.$showLoading('提交中~');
				let Data = {
					shop_id: uni.getStorageSync('store_id'),
					id: that.itemResult.id,
				}
				// 1 自配 2 物流
				if(way == 1) Data['send_code'] = 'MySelf'; 
				if(way == 2) Data = {...Data,...Item};
				that.$http.post({
					url: '/singleSaleManageApi/orderDistribution',
					data: Data
				}).then(res => {
					that.$hideLoading();
			
					if (res.code != 100) return that.$Toast(res.msg);
					that.$Toast(res.msg);
					that.expressage = false;
					that.facilitatorNum = '';
					that.send_ordernum = '';
					const Index = that.pageData.findIndex(n => n.id == that.itemResult.id);
					that.pageData.splice(Index, 1);
				})
			},
			
			click(e) {
				this.current = e.index;
				this.status = e.status;
				this.page = 1;
				this.getMore = true;
				this.getWarehouseOrderList();
			},
			IdsShow(item) {
				this.showData = item;
				this.show = true;
			},
			
			
		},
		
		
		onReachBottom() {
			if (!this.getMore) return;
			this.page++;
			this.getWarehouseOrderList();
		},
	
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.dowm{
		width:500rpx;
		height: 100rpx;
		border:1rpx solid red;
	}
	.Nav {
		width: 100%;
		height: 84rpx;
		background-color: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.list {
		width: 100%;
		padding: 20rpx;
		background-color: #ffffff;
		padding: 0 20rpx 20rpx 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.OrderTime {
		color: #000;
		font-size: 26rpx;
		padding: 20rpx 0;


	}


	.product_Img {
		width: 140rpx;
		height: 140rpx;
	}

	.content {
		width: 500rpx;
	}

	.numId {
		position: absolute;
		right: 0;
		top: 0;
		background: #FF784A;
		border-radius: 0 10rpx 0 10rpx;
	}

	.Ordernum {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	.confirm {
		width: 130rpx;
		height: 54rpx;
		border-radius: 26rpx;
		background-color: #FF784A;
		color: #ffffff;
		font-size: 22rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
	}

	.confirm:first-child {
		margin-left: 0;
	}

	.popContent {
		width: 530rpx;
		min-height: 300rpx;
		padding: 30rpx;
		font-size: 28rpx;
		color: #000;
		display: flex;
		flex-direction: column;
	}

	.pop_name {
		width: 90rpx;
		display: block;
	}

	
</style>